<route lang="jsonc" type="page">{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "注册页面",
  },
}</route>

<script lang="ts" setup>
import { registerApi } from '@/api';
import { to } from '@/utils';
import { useCountDown } from 'wot-design-uni/components/composables/useCountDown';



const { start, pause, reset, current } = useCountDown({
  time: 6 * 1000,
  onChange(current) {
    console.log('剩余时间', current)
  },
  onFinish() {
    console.log('倒计时结束')
    reset()
  }
})

const getCode = async () => {
  start()
};

const value = ref<string>("");
function handleChange(event) {
  console.log(event);
}

const columns = ref(["+86", "+87"]);
const areaValue = ref("+86");

// 表单值
const formValues = ref({
  phone: "",
  password: "",
  smsCode: "",
});


function handleConfirm({ value }) {
  areaValue.value = value;
}

const register = async () => {
  try {
    uni.showLoading({
      title: '注册中...',
    });
    const _res = await registerApi(formValues.value);
    uni.showToast({
      title: '注册成功',
      icon: 'success',
      duration: 2000,
    });

    /* 吧token存在本地 */
    uni.setStorageSync('token', _res?.token);

    console.log('注册', _res)

    setTimeout(() => {
      to('/pages/login/chooseGender')
    }, 1000);

  } catch (error) {
    uni.hideLoading();

  }
}

</script>

<template>
  <view style="min-height: 100vh; background-color: white">
    <div class="logo">LOGO</div>

    <div class="login_content">
      <div class="input_content">
        <wd-input type="text" v-model="formValues.phone" placeholder="请输入手机号" @change="handleChange" no-border
          custom-class="input_root">
          <template #prefix>
            <wd-picker :columns="columns" v-model="areaValue" @confirm="handleConfirm" />
          </template>
        </wd-input>
      </div>

      <div class="input_content mt-16rpx">
        <wd-input type="text" v-model="formValues.smsCode" placeholder="请输入验证码" @change="handleChange" no-border
          custom-class="input_root">
          <template #suffix>
            <wd-button :custom-style="'borderRadius: 20rpx; height: 68rpx'" size='medium' :round="false"
              @click="getCode">{{ current.seconds != 6 && current.seconds != 0 ? current.seconds + 's' : '获取验证码'
              }}</wd-button>
          </template>
        </wd-input>
      </div>

      <div class="input_content mt-16rpx">
        <wd-input v-model="formValues.password" show-password @change="handleChange" no-border custom-class="input_root"
          placeholder="请设置密码" />
      </div>

      <div class="mt-22rpx" style="color: #999999; font-size: 24rpx">
        请输入6-16个字符组成的密码
      </div>

      <div class="mt-80rpx">
        <wd-button block size="large" @click="register">注册</wd-button>
      </div>

      <div style="
          position: fixed;
          bottom: 92rpx;
          font-size: 28rpx;
          display: flex;
          justify-content: center;
        ">
        <wd-checkbox :modelValue="true" shape="square" />
        <span style="color: #999999"> 已阅读并同意</span>
        <span style="color: #ff0800">《用户协议》《隐私政策》</span>
      </div>
    </div>
  </view>
</template>

<style lang="scss" scoped>
.logo {
  margin-top: 156rpx;
  display: flex;
  justify-content: center;

  font-family: Inter, Inter;
  font-weight: 600;
  font-size: 96rpx;
  color: #000000;
  text-align: left;
  text-transform: none;
}

.login_content {
  margin-top: 100rpx;

  padding-left: 50rpx;
  padding-right: 50rpx;
}

.input_content {
  width: 650rpx;
  height: 102rpx;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  border: 2rpx solid #d9d9d9;

  display: flex;
  align-items: center;
}

.input_root {
  width: 96%;
  margin-left: 32rpx;
  margin-right: 32rpx;
}
</style>
